﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Personality Test</title>

<style>
body {
  font-family: "Lucida Console";
  margin: 0px
}

header {
  background: black;
  color: white;
  margin: 0px;
  padding: 20px;
  font-size: smaller;
}

header h1 {
  margin: 0px;
}

header p {
  margin: 0px;
  font-size: large;
}

.score {
  margin: 25px;
}

.score h2 {
  font-weight: normal;
  margin-bottom: 5px;
  font-size: 18px;
}

</style>
<script>


window.onload = function() {
  var extraversion = Number(getQueryVariable("e"));
  var accommodation = Number(getQueryVariable("a"));
  var conscientiousness = Number(getQueryVariable("c"));
  var neuroticism = Number(getQueryVariable("n"));
  var openness = Number(getQueryVariable("o"));

  // Show the score numbers.
  document.getElementById("headingE").innerHTML += extraversion;
  document.getElementById("headingA").innerHTML += accommodation;
  document.getElementById("headingC").innerHTML += conscientiousness;
  document.getElementById("headingN").innerHTML += neuroticism;
  document.getElementById("headingO").innerHTML += openness;
};

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
}
</script>
</head>

<body>
  <header>
    <h1>Five Factor Personality Test</h1>
    <p>The Results</p>
  </header>

  <div class="score">
    <h2 id="headingE">Extraversion: </h2>
  </div>

  <div class="score">
    <h2 id="headingA">Accommodation: </h2>
  </div>

  <div class="score">
    <h2 id="headingC">Conscientiousness: </h2>
  </div>

  <div class="score">
    <h2 id="headingN">Neuroticism: </h2>
  </div>

  <div class="score">
    <h2 id="headingO">Openness: </h2>
  </div>

</body>
</html>
